<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=ie8">
        <title>EasyNmon</title>
        <meta name="keywords" content="index">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="renderer" content="webkit">
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <link rel="stylesheet" href="js/amazeui.min.css" />
        <link rel="stylesheet" href="js/app.css">
        <script src="js/jquery.min.js"></script>

    </head>

    <body data-type="widgets">
        <div class="am-g tpl-g">
            <!-- 内容区域 -->
            <div>
                <div class="row-content">
                    <div class="row">
                        <div>
                            <div class="page-header-heading"> EasyNmon <small>服务器性能监控工具</small></div>
                        </div>
                    </div>
                </div>

                <div class="am-cf">
                    <div class="row">
                        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                            <div class="widget am-cf">
                                <div class="widget-body am-fr">
                                    <form class="am-form tpl-form-line-form">
                                        <label for="user-name" class="am-u-sm-5 am-form-label"><span class="tpl-form-line-small-title">Name</span>
                                            任务名称 </label>
                                        <div class="am-u-sm-7">
                                            <input type="text" class="am-form-field tpl-form-no-bg" id="name"
                                                placeholder="输入监控任务名称">
                                            <small>不建议设置中文任务名，默认Linux编码会在图表展示页面出现乱码</small>
                                        </div>
                                        <label for="user-email" class="am-u-sm-5 am-form-label"><span class="tpl-form-line-small-title">Time</span>
                                            监控时长 </label>
                                        <div class="am-u-sm-7">
                                            <input type="text" class="am-form-field tpl-form-no-bg" id="time"
                                                placeholder="输入监控时长">
                                            <small>单位为分钟</small>
                                        </div>
                                        <label for="user-email" class="am-u-sm-5 am-form-label"><span class="tpl-form-line-small-title">Frequency</span>
                                            监控频率 </label>
                                        <div class="am-u-sm-7">
                                            <input type="text" class="am-form-field tpl-form-no-bg" id="frequency"
                                                placeholder="输入监控频率" value="30">
                                            <small>单位为秒，推荐设置30秒以上</small>
                                        </div>

                                    </form>
                                </div>
                                <div class="widget-head am-cf">
                                    <div class="am-u-sm-9 am-u-sm-push-5">
                                        <button type="button" id="start" class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交服务器监控任务</button>
                                    </div>
                                </div>
                                <div class="widget-head am-cf">
                                    <div class="am-u-sm-9 am-u-sm-push-5">
                                        <button type="button" id="stop" class="am-btn am-btn-primary tpl-btn-bg-color-success ">结束服务器监控任务</button>
                                    </div>
                                </div>
                                <div class="widget-head am-cf">
                                    <div class="am-u-sm-9 am-u-sm-push-5">
                                        <button type="button" id="close" class="am-btn am-btn-primary tpl-btn-bg-color-success ">
                                            结束easyNmon服务&nbsp </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                            <div class="widget am-cf">
                                <div class="widget-head am-cf">
                                    <div class="am-u-sm-9 am-u-sm-push-5">
                                        <button type="button" id="reprot" class="am-btn am-btn-primary tpl-btn-bg-color-success ">查看服务器监控报告</button>
                                    </div>
                                </div>
                                <div class="widget-button">
                                    <div class="am-u-sm-9 am-u-sm-push-5">
                                        <button type="button" id="sysinfo" class="am-btn am-btn-primary tpl-btn-bg-color-success ">查看服务器系统信息</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="am-modal am-modal-prompt" tabindex="-1" id="messagebox">
            <div class="am-modal-dialog">
                <div id="message" class="am-modal-bd">
                    返回消息！
                </div>
                <div class="am-modal-footer">
                    <span class="am-modal-btn">确定</span>
                </div>
            </div>
        </div>
        <script src="js/amazeui.min.js"></script>
        <script src="js/app.js"></script>
        <script>
            $(document).ready(function() {
                var hostname = window.location.host;
                var ajaxGet = function(para,button) {
                    $.ajax({
                        url: "http://" + hostname + "/" + para,
                        type: "GET",
                        dataType: "json",
			cache:false,
                        beforeSend: function(){
                            button.attr({ disabled: "disabled" });
                        },
                        success: function(response) {
                            $('#message').html(response.message);
                            $('#messagebox').modal({
                                relatedTarget: this
                            })
                        },
                        error: function(XmlHttpRequest, textStatus, errorThrown) {
                            //调用失败
                            $('#message').html("执行异常，请检查easyNmon服务是否启动正常！");
                            $('#messagebox').modal({
                                relatedTarget: this
                            })
                        },
                        complete: function(){
                            button.removeAttr("disabled");
                        }
                    });
                };

                $('#start').on('click', function() {
                    if ($('#name').val() === "" || $('#time').val() === "" || $('#frequency').val() === "") {
                        $('#message').html("通过web页面执行时，参数不能为空！");
                        $('#messagebox').modal({
                            relatedTarget: this
                        });
                        return
                    }
                    ajaxGet("start?n=" + $('#name').val() + "&t=" + $('#time').val() + "&f=" + $('#frequency').val(),$('#start'));
                });
                $('#stop').on('click', function() {
                    ajaxGet("stop",$('#stop'));
                });
                $('#reprot').on('click', function() {
                    window.location.href = "http://" + hostname + "/report";
                });
                $('#close').on('click', function() {
                    ajaxGet("close",$('#close'));
                });
                $('#sysinfo').on('click', function() {
                    ajaxGet("sysinfo",$('#sysinfo'));
                });
            });
        </script>

    </body>

</html>
